
<!-- 巡检任务管理 -->
<template>
    <div class="page">
        <div class="nuclein-query">
            <div>巡检任务管理</div>
            <div style="margin-left: auto;">
                <el-button size="mini" type="primary" @click="handleAdd">添加巡检任务</el-button>
            </div>
        </div>
        <div class="device-type">
            <p>
                <span>巡检状态：</span>
                <el-select size="mini" v-model="pageLimit.sysWorkInspectionPlanState" placeholder="请选择" @change="handlerInspectionState"
                  clearable>
                  <el-option v-for="item in inspectionState" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
            </p>
            <p>
                <span>所在小区：</span>
                <el-select size="mini" v-model="pageLimit.estateId" placeholder="请选择" @change="handlerestateId"
                  clearable>
                  <el-option v-for="item in estateIdList" :key="item.estateId" :label="item.estateName" :value="item.estateId">
                  </el-option>
                </el-select>
            </p>
            <el-button size="mini" type="primary" :disabled='disabBool' @click="handleOpenClose(1)">开启巡检</el-button>
            <el-button size="mini" type="warning" :disabled='disabBool' @click="handleOpenClose(0)">关闭巡检</el-button>
            <el-button size="mini" type="primary" :disabled='disabBool' @click="handleDelete()">删除</el-button>
        </div>
        <div class="content-row">
            <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column prop="sysWorkInspectionPlanName" label="巡检名称" align="center" width="120">
                </el-table-column>
                <el-table-column prop="sysUserName" label="创建人名称" align="center" width="120">
                </el-table-column>
                <el-table-column prop="estateName" label="小区名称" align="center">
                </el-table-column>
                <el-table-column prop="deviceName" label="设备名称" align="center">
                </el-table-column>
                <el-table-column prop="sysWorkInspectionPlanTime" label="巡检周期" align="center" width="120">
                    <template slot-scope="scope" v-for="(item,index) in 3">
                        <el-tag type="primary">{{ remindData[scope.row.sysWorkInspectionPlanTime] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sysWorkInspectionPlanState" label="巡检状态" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.sysWorkInspectionPlanState?'primary':'danger'">{{scope.row.sysWorkInspectionPlanState?'已开启':'已关闭'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="maintenanceUserName" label="巡检人" align="center" width="120">
                </el-table-column>
                <el-table-column label="操作" align="center" width="160">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">修改</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageLimit.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageLimit.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="审核" :visible.sync="dialogFormVisible">
            <el-form :model="dialogForm"  :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
                <el-form-item label="任务名称" :label-width="formLabelWidth" prop="sysWorkInspectionPlanName">
                    <el-input v-model="dialogForm.sysWorkInspectionPlanName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="任务执行时间" :label-width="formLabelWidth" prop="sysWorkInspectionPlanTime">
                    <el-radio-group v-model="dialogForm.sysWorkInspectionPlanTime">
                        <el-radio :label="0">日结束</el-radio>
                        <el-radio :label="1">周结束</el-radio>
                        <el-radio :label="2">月结束</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="维修人员" :label-width="formLabelWidth" prop="maintenanceUserId">
                    <el-select size="mini" v-model="dialogForm.maintenanceUserId" placeholder="请选择维修人员" @change="handlerEstate"
                        clearable :disabled="dialogBool">
                        <el-option v-for="item in maintenanceList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在小区" :label-width="formLabelWidth" prop="estateId">
                    <el-select size="mini" v-model="dialogForm.estateId" placeholder="请选择所在小区" @change="handlerEstate"
                        clearable :disabled="dialogBool">
                        <el-option v-for="item in estateIdList" :key="item.estateId" :label="item.estateName" :value="item.estateId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备类型" :label-width="formLabelWidth" prop="deviceType">
                    <el-select size="mini" v-model="dialogForm.deviceType" placeholder="请选择设备类型" @change="handlerDestatState"
                        clearable>
                        <el-option v-for="item in destatStateList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备" :label-width="formLabelWidth" prop="deviceId">
                    <el-select size="mini" v-model="dialogForm.deviceId" placeholder="请选择设备" @change="handlerDestat"
                        clearable>
                        <el-option v-for="item in destatList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleReject()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { patrolTaskList, patrolTaskAdd, getEstate, doorguardList, getMonitoring, maintenance, patrolTaskUpdateState, patrolTaskDelete } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {
  data () {
    return {
      pageLimit: {
        page: 1,
        size: 10,
        estateId: '', // 所在小区
        sysWorkInspectionPlanState: '' // 巡检状态
      },
      disabBool: true, // 判断按钮选择
      disabList: [],
      dialogBool: true,
      remindData: ['一天', '一周', '一月'], // 用于判断巡检状态
      remindDetailed: ['每天凌晨一点开始', '每周星期天的凌晨一点', '每月的一号凌晨一点'], // 巡检状态详情
      inspectionState: commonData.inspectionState,
      destatStateList: commonData.equipmentTypeList,
      total: 0,
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      estateIdList: [],
      transitList: [], // 临时中转数据
      destatList: [], // 设备
      maintenanceList: [], // 维修人员
      id: '',
      dialogForm: {
        sysWorkInspectionPlanId: '',
        maintenanceUserId: '', // 维修人员ID
        sysWorkInspectionPlanName: '', // 巡检名称
        estateId: '', // 巡检计划小区
        deviceId: '', // 巡检计划设备'
        deviceType: '', // 设备类型0门禁机 1摄像头'
        sysWorkInspectionPlanTime: '' // 巡检计划的间 0:日 1: 周 2: 月
      },
      rules: {
        sysWorkInspectionPlanName: [{ required: true, message: '请输入故障信息', trigger: 'blur' }],
        sysWorkInspectionPlanTime: [{ required: true, message: '请选择服务工期结束', trigger: 'blur' }],
        deviceId: [{ required: true, message: '请选择设备', trigger: 'blur' }],
        estateId: [{ required: true, message: '请选择小区', trigger: 'blur' }],
        deviceType: [{ required: true, message: '请选择设备类型', trigger: 'blur' }],
        maintenanceUserId: [{ required: true, message: '请选择维修人员', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.gitList()
    this.getgetEstate()
  },
  watch: {
    dialogFormVisible (newVal, oldVal) {
      if (!newVal) {
        this.dialogForm = {
          maintenanceUserId: '', // 维修人员ID
          sysWorkInspectionPlanName: '', // 巡检名称
          estateId: '', // 巡检计划小区
          deviceId: '', // 巡检计划设备'
          deviceType: '', // 设备类型0门禁机 1摄像头'
          sysWorkInspectionPlanTime: '' // 巡检计划的间 0:日 1: 周 2: 月
        }
      }
    }
  },
  methods: {
    // 审核按钮
    handleEdit (id) {
      this.dialogFormVisible = true
    },
    handleAdd () {
      this.dialogBool = false
      this.dialogFormVisible = true
    },
    // 所在小区
    handlerestateId (e) {
      this.pageLimit.estateId = e
      this.gitList()
    },
    // 删除巡检任务
    handleDelete (e) {
      this.$confirm('此操作将永久删除巡检任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        patrolTaskDelete([...this.disabList]).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.getList()
            this.disabList = []
          } else {
            this.$message.warning(res.msg)
          }
        })
      }).catch(() => {
        this.$message.warning('您已取消删除')
      })
    },
    // 巡检状态
    handlerInspectionState (e) {
      this.pageLimit.sysWorkInspectionPlanState = e
      this.gitList()
    },
    // 选择小区
    handlerEstate (e) {
      this.dialogForm.deviceType = ''
      this.id = e
    },
    // 选择设备类型
    handlerDestatState (e) {
      this.destatList = []
      const data = {
        page: 1,
        limit: 9999,
        estateId: this.id
      }
      if (!e) { // 获取门禁机
        doorguardList({ ...data }).then(res => {
          if (res.code === 0) {
            this.destatList = res.page.list.map(res => {
              const label = res.deviceName
              const value = res.id
              return {
                label,
                value
              }
            })
          } else {
            this.$message.success(res.msg)
          }
        })
      } else {
        getMonitoring({ ...data }).then(res => {
          if (res.code === 0) {
            this.destatList = res.list.records.map(res => {
              const label = res.monitoringName
              const value = res.monitoringId
              return {
                label,
                value
              }
            })
          } else {
            this.$message.success(res.msg)
          }
        })
      }
    },
    // 选择设备
    handlerDestat (e) {

    },
    // 修改巡检任务
    handleUpdate (e) {
      this.dialogFormVisible = true
      this.dialogBool = true
      this.dialogForm.sysWorkInspectionPlanId = e.sysWorkInspectionPlanId
      this.dialogForm.maintenanceUserId = e.maintenanceUserId
      this.dialogForm.sysWorkInspectionPlanName = e.sysWorkInspectionPlanName
      this.dialogForm.estateId = e.estateId
      this.id = e.estateId
      this.dialogForm.deviceId = e.deviceId + ''
      this.dialogForm.deviceType = e.deviceType
      this.dialogForm.sysWorkInspectionPlanTime = e.sysWorkInspectionPlanTime
      this.handlerDestatState(e.deviceType)
    },
    // 获取表格数据
    handleSelectionChange (e) {
      this.disabBool = true
      const list = e
      const data = list.map(res => {
        return {
          sysWorkInspectionPlanId: res.sysWorkInspectionPlanId
        }
      })
      for (let i = 0; i < data.length; i++) {
        this.disabList.push(data[i].sysWorkInspectionPlanId)
      }
      if (e.length !== 0) {
        this.disabBool = false
      } else {
        this.disabList = []
      }
    },

    // 开启巡检|关闭巡检
    handleOpenClose (e) {
      this.$confirm('此操作将永久开启巡检, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handlePatrol(e)
      }).catch(() => {})
    },
    handlePatrol (e) {
      const data = {
        sysWorkInspectionPlanId: [
          ...this.disabList
        ],
        sysWorkInspectionPlanState: e
      }
      patrolTaskUpdateState({ ...data }).then(res => {
        if (res.code === 0) {
          this.$message.success(e ? '开启成功' : '关闭成功')
          this.gitList()
          this.disabList = []
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 确定添加
    handleReject () {
      patrolTaskAdd({ ...this.dialogForm }).then(res => {
        if (res.code === 0) {
          this.dialogFormVisible = false
          this.gitList()
          this.$message.success(this.dialogForm.sysWorkInspectionPlanId ? '修改成功' : '添加成功')
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 获取小区数据
    getgetEstate () {
      getEstate().then(res => {
        if (res.code === 0) {
          this.estateIdList = res.list
        }
      })
      const data = {
        page: 1,
        size: 9999
      }
      maintenance({ ...data }).then(res => {
        if (res.code === 0) {
          this.maintenanceList = res.page.records.map(item => {
            const label = item.userName
            const value = item.userId
            return {
              label,
              value
            }
          })
        }
      })
    },
    // 获取
    gitList () {
      patrolTaskList({ ...this.pageLimit }).then(res => {
        if (res.code == 0) {
          const { total, records } = res.page
          this.tableData = records
          this.total = total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 分页
    handleSizeChange (val) {
      this.pageLimit.size = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.pageLimit.page = val
      this.gitList()
    }
  }
}
</script>

<style scoped>
.page {
    position: relative;
    height: 100%;
}

.dialog_butt {
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0px;
}

.nuclein-query {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
}

.device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

.device-type>p {
    margin-right: 20px;
}

.content-row {
    overflow: hidden;
}

.device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

/* 分页 */
.pagination {
    width: 100%;
    padding: 20px;
    border-top: 1px solid #DCDFE6;
}
</style>
